<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>骡窝日报详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/newsContent.css">
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/common.js"></script>
	<link rel="stylesheet" href="/js/plugins/swiper-4.3.5/dist/css/swiper.min.css">
	<script src="/js/plugins/swiper-4.3.5/dist/js/swiper.js"></script>
	<!-- Demo styles -->
	<style>

		body {
			background: #eee;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 30px;
			color:#000;
			margin: 0;
			padding: 0;
		}
		.swiper-container {
			width: 100%;
			height: 80%;
		}
		.swiper-slide {
			text-align: center;
			font-size: 30px;
			background: #fff;

			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		p {
			font-size: 10px;
			margin:1em 0;
		}
	</style>
	<script>
        var user = JSON.parse(sessionStorage.getItem("user"));
        $(function () {
            var params = getParams();
            //如果没有id,就直接结束方法
            if(!params.id){
                return;
            }
            //console.log(params.id);
            //通过id获取日报内容
            $.get("/news/"+params.id,function (data) {
                //渲染数据
                $(".newsDetail").renderValues(data);

                //文章推荐(当前文章的类型:data.type.id,当前文章的id:data.id)
                var typeId = data.type.id;
                $.get('/news/recommend',{typeId:typeId,pageSize:5,newsId:params.id},function (result) {
                    console.log(result);
                    $(".recommend").renderValues(result);
                    var swiper = new Swiper('.swiper-container', {
                        slidesPerView: 3,
                        spaceBetween: 10,
                        loop: true,
                        loopFillGroupWithBlank: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                    });

                    $(".recommend a[data-url]").click(function () {
                        var url = $(this).data("url")
                        var id = $(this).data("id")
                        window.location.href = url + id;
                    })
                });



                //收藏
                if(user){
                    //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                    $.get('/collectionces/statusId',{userId:user.id, newsId:params.id},function (data) {
                        console.log(data);
                        if (data) {
                            $('#collectBtn').removeClass('fa fa-star-o');
                            $('#collectBtn').addClass('fa fa-star');
                        }
                    });
                }

                $('#collectBtn').click(function () {
                    if(user){
                        //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                        $.get('/collectionces/statusId',{userId:user.id, newsId:params.id},function (data) {
                            if (data) {
                                $.ajax({
                                    type:'put',
                                    url:'/collectionces',
                                    data:{userId:user.id, newsId:params.id},
                                    success:function (data) {
                                        if (data.success) {
                                            $('#collectBtn').removeClass('fa fa-star');
                                            $('#collectBtn').addClass('fa fa-star-o');
                                        }
                                    }
                                })
                            }else{
                                $.ajax({
                                    type:'post',
                                    url:'/collectionces',
                                    data:{userId:user.id, newsId:params.id},
                                    success:function (data) {
                                        if (data.success) {
                                            $('#collectBtn').removeClass('fa fa-star-o');
                                            $('#collectBtn').addClass('fa fa-star');
                                        }
                                    }
                                })
                            }
                        });
                    }
                })
            });


            //点赞
            if(user){
                //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                $.get('/clicks/statusId',{userId:user.id, newsId:params.id},function (data) {
                    console.log(data);
                    if (data) {
                        $('#likeBtn').removeClass('fa fa-thumbs-o-up');
                        $('#likeBtn').addClass('fa fa-thumbs-up');
                    }
                });
            }

            $('#likeBtn').click(function () {
                if(user){
                    //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                    $.get('/clicks/statusId',{userId:user.id, newsId:params.id},function (data) {
                        if (data) {
                            $.ajax({
                                type:'put',
                                url:'/clicks',
                                data:{userId:user.id, newsId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#likeBtn').removeClass('fa fa-thumbs-up');
                                        $('#likeBtn').addClass('fa fa-thumbs-o-up');
                                    }
                                }
                            })
                        }else{
                            $.ajax({
                                type:'post',
                                url:'/clicks',
                                data:{userId:user.id, newsId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#likeBtn').removeClass('fa fa-thumbs-o-up');
                                        $('#likeBtn').addClass('fa fa-thumbs-up');
                                    }
                                }
                            })
                        }
                    });
                }
            })


        })
	</script>

</head>
<body>
<div class="newsDetail">
	<div>
		<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
			<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
		</a>
		<img render-src="coverUrl">

		<br class="container">
		<div class="row typeRow">
			<div class="col-4">
				<span class="type" render-html="type.name"></span>
			</div>
			<div class="col-2">
			</div>
			<div class="col-2">
				<span>By</span>
			</div>
			<div class="col-4">
				<span class="type">骡窝官方</span>
			</div>
		</div>

		<div class="detail">
			<h2 class="title" render-html="title"></h2>
			<div class="content" render-html="content.content"><p></p></div>
		</div>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<i  class="fa fa-star-o" id="collectBtn" > </i>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<i  class="fa fa-thumbs-o-up" id="likeBtn" > </i>
		</br>

		<div>
			<div class="recommend">
				<div class="swiper-container" id="newsCommend">
					<h6 class="news-title" style="text-align: center">相关推荐 </h6>
					<div class="swiper-wrapper" render-loop="list">
						<div class="swiper-slide">
							<a href="javascript:;" data-url="/newsContent.html?id=" render-attr="data-id=list.id">
								<img render-src="list.coverUrl">
								<p render-html="list.releaseTime"></p>
								<h2 class="title" style="font-size: 10px" render-html="list.title"></h2>
							</a>
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>

	</div>

</div>

</div>

</body>
</html>